<template>
  <div class="aqi-container">
    <div class="aqi-title">
      <el-card>
        <el-table
          :data="aqiList"
          border
          style="width: 300px"
          size="small"
          height="200px"
          :cell-style="tableRowClassName"
        >
          <el-table-column prop="chineseExplain" label="AQI等级" />
          <el-table-column prop="aqiExplain" label="AQI描述" show-overflow-tooltip />
        </el-table>
      </el-card>
    </div>
    <div class="demo-rate-block">
      <span class="demonstration">请选择预估AQI等级:</span>
      <el-rate
        v-model="aqiFeedback.estimatedGrade"
        :colors="colors"
        :max="6"
        size="large"
        :texts="texts"
        show-text
        text-color="grey"
        class="rate-demo"
        clearable
      />
    </div>
  </div>
</template>
<script setup>
import { useAqiStore } from '@/stores/aqi/aqi.js'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'

const aqiFeedbackStore = useAqiFeedbackStore()
const { aqiFeedback } = storeToRefs(aqiFeedbackStore)
const aqiStore = useAqiStore()
const { aqiList } = storeToRefs(aqiStore)
const colors = {
  1: 'rgb(163 230 53)',
  2: 'rgb(250 204 21)',
  3: 'rgb(234 88 12)',
  4: 'rgb(185 28 28)',
  5: 'rgb(76 29 149)',
  6: 'rgb(146 64 14)'
}

const texts = ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']

const tableRowClassName = (row) => {
  return { 'background-color': colors[row.rowIndex + 1], color: 'white' }
}

onMounted(() => {
  aqiStore.getAqiList()
})
</script>

<style scoped lang="scss">
.aqi-container {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  .aqi-title {
    margin-bottom: 20px;
    margin-left: 30px;
    font-size: 12px;
    width: 350px;
    border-radius: 30px;
  }
  .demo-rate-block {
    .demonstration {
      margin-right: 10px;
      margin-left: 30px;
    }
    .rate-demo {
      margin-top: 20px;
      margin-left: 50px;
      margin-bottom: 10px;
      :deep(.el-rate__icon) {
        font-size: 38px;
      }
    }
  }
}
</style>
